<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=no">
		<title>slideTest1</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.container{
				width: 100%;
				position: relative;
				background: #C5E4FA;
				min-height: 400px;
				overflow: hidden;
			}
			.div1{
			min-height: 400px;	
			}
			.div2{
				min-height: 400px;
				background: darkcyan;
			}
		</style>
		<link rel="stylesheet" href="slidecard.css" />
		<script type="text/javascript" defer="defer" async="async" src="slidecard.js"></script>
	</head>
	<body>
		
		<div class="container" id="container">
			<div class="div1">
				<span>我是主页面</span>
				<input type="text" placeholder="请输入" id="content" />
				<br />
				<input type="text" id="show" readonly="readonly" />
				<button id="remove">remove</button>
				<button id="btn">slide</button>
			</div>
			<div class="div2" id="slide">我是要变为滑动的页
				<button id="slideout">slideout</button>
			</div>
		</div>
		<script>
			window.onload = function(){
				var slide = document.getElementById('slide');
				var container = document.getElementById('container');
				var s = new slideCard({
						type:1,
						dom:slide,
						container:container
					});
			
				document.getElementById('btn').onclick = function(){
					s.slideIn();
				};
				document.getElementById('remove').onclick = function(){
						container.removeChild(slide);
				};
				document.getElementById('slideout').onclick = function(){
					s.slideOut();
				};
				var content = document.getElementById('content');
				var show = document.getElementById('show');
				content.onkeyup = function(ev){
					show.value = this.value;
					console.log(ev);
				};
				content.addEventListener('input',function(ev){
						console.log(ev);		
				},false);
			};
		
		</script>
	</body>
</html>
